<template>
  <div class="global-tabbar">
    <van-tabbar v-model="barName" route active-color="#07c160" inactive-color="#000">
      <van-tabbar-item replace name="home" to="/home">
        <img slot="icon" :src="icons.home" />
        <span>首页</span>
      </van-tabbar-item>
      <van-tabbar-item replace name="video" to="/video">
        <img slot="icon" :src="icons.video" />
        <span>视频</span>
      </van-tabbar-item>
      <van-tabbar-item replace name="music" to="/music">
        <img slot="icon" :src="icons.music" />
        <span>音乐</span>
      </van-tabbar-item>
      <van-tabbar-item replace name="novel" to="/novel">
        <img slot="icon" :src="icons.novel" />
        <span>小说</span>
      </van-tabbar-item>
      <van-tabbar-item replace name="meitu" to="/meitu">
        <img slot="icon" :src="icons.news" />
        <span>美图</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { Tabbar, TabbarItem } from "vant";

// 导入tabbar图标
let homePng = require("@/assets/tabbar/home.png");
let videoPng = require("@/assets/tabbar/video.png");
let musicPng = require("@/assets/tabbar/music.png");
let novelPng = require("@/assets/tabbar/novel.png");
let newsPng = require("@/assets/tabbar/news.png");

@Component({
  components: {
    // 想引入vant组件，必须以这种方式写
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem
  }
})
export default class TabbarCom extends Vue {
  @Prop({ required: true, default: "" })
  private tabbarName!: string;
  // 不直接修改tabbarName，是为了避免父组件改动它后，子组件内部又改了一次它，因此将该变量赋值处理，子组件引用
  private barName: string = this.tabbarName;

  public icons: object = {
    home: homePng,
    video: videoPng,
    music: musicPng,
    novel: novelPng,
    news: newsPng
  };


  mounted() {}
}
</script>
